<!-- 生产排期 （新） -->
<template>
  <div class="app-container">
    <div class="app-container-box">
      <el-divider>
        <div class="app-container-box-divider">
          基础信息
        </div>
      </el-divider>
      <div class="app-container-box-content">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="75px">
          <el-form-item label="工单编码" prop="workorderCode">
            <el-input
              v-model="queryParams.workorderCode"
              placeholder="请输入工单编码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="工单名称" prop="workorderName">
            <el-input
              v-model="queryParams.workorderName"
              placeholder="请输入工单名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="关联计划" prop="sourceCode">
            <el-input
              v-model="queryParams.sourceCode"
              placeholder="请输入订单类型"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="计划编号" prop="productCode">
            <el-input
              v-model="queryParams.productCode"
              placeholder="请输入计划编号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="工单类型" prop="productName">
            <el-input
              v-model="queryParams.productName"
              placeholder="请输入产品名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="产品名称" prop="clientCode">
            <el-input
              v-model="queryParams.clientCode"
              placeholder="请输入产品名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="产品编号" prop="clientName">
            <el-input
              v-model="queryParams.clientName"
              placeholder="请输入产品编号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="成品规格" prop="clientName">
            <el-input
              v-model="queryParams.clientName"
              placeholder="请输入成品规格"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="产品类型" prop="clientName">
            <el-input
              v-model="queryParams.clientName"
              placeholder="请输入产品类型"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="单位" prop="clientName">
            <el-input
              v-model="queryParams.clientName"
              placeholder="请输入产品编号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="BOM" prop="clientName">
            <el-input
              v-model="queryParams.clientName"
              placeholder="请输入产品编号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="BOM版本" prop="clientName">
            <el-input
              v-model="queryParams.clientName"
              placeholder="请输入产品编号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="计划数" prop="clientName">
            <el-input
              v-model="queryParams.clientName"
              placeholder="请输入产品编号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="开工日期" prop="requestDate">
            <el-date-picker clearable
              v-model="queryParams.requestDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="完工日期" prop="requestDate">
            <el-date-picker clearable
              v-model="queryParams.requestDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="需求日期" prop="requestDate">
            <el-date-picker clearable
              v-model="queryParams.requestDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="创建日期" prop="requestDate">
            <el-date-picker clearable
              v-model="queryParams.requestDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="创建人" prop="workorderType">
            <el-input
              v-model="queryParams.workorderType"
              placeholder="请输入创建人"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="app-container-box">
      <el-divider>
        <div class="app-container-box-divider">
          物料清单
        </div>
      </el-divider>
      <div class="app-container-box-content">
        <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          style="width: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            property="date"
            label="日期"
            width="120">
          </el-table-column>
          <el-table-column
            property="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            property="address"
            label="地址">
          </el-table-column>
          <el-table-column
            property="address"
            label="地址">
          </el-table-column>
          <el-table-column
            property="address"
            label="地址">
          </el-table-column>
          <el-table-column
            property="address"
            label="地址">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="app-container-box">
      <el-divider>
        <div class="app-container-box-divider">
          工艺流程
        </div>
      </el-divider>
      <div class="app-container-box-content">
        <div class="app-container-box-content-header">
          <el-form  size="small" :inline="true" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="工艺路线名称：">
                工艺路线名称
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工艺路线编号：">
                  工艺路线名称
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-steps :active="activeStep" simple>
            <el-step >
              <template slot="icon">1</template>
              <template slot="title">
                <div style="cursor: pointer;" @click="handleChangeStep(1)">步骤 1</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">2</template>
              <template slot="title">
                <div style="cursor: pointer;" @click="handleChangeStep(2)">步骤 2</div>
              </template>
            </el-step>
            <el-step >
              <template slot="icon">3</template>
              <template slot="title">
                <div style="cursor: pointer;" @click="handleChangeStep(3)">步骤 3</div>
              </template>
            </el-step>
            <el-step >
              <template slot="icon">4 </template>
              <template slot="title">
                <div style="cursor: pointer;" @click="handleChangeStep(4)">步骤 4</div>
              </template>
            </el-step>
          </el-steps>
          <div class="app-container-box-content-main">
            <div class="app-container-box-content-main-btn">
              <el-button type="primary" size="small" style="margin-top: 20px;" @click="handleAdd">新增</el-button>
              <el-button size="small" style="margin-top: 20px;" @click="handleEdit">编辑</el-button>
              <el-button size="small" style="margin-top: 20px;" @click="handleDelete">删除</el-button>
            </div>

            <el-table
              ref="singleTable"
              :data="tableData"
              highlight-current-row
              style="width: 100%">
              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column
                property="date"
                label="日期"
                width="120">
              </el-table-column>
              <el-table-column
                property="name"
                label="姓名"
                width="120">
              </el-table-column>
              <el-table-column
                property="address"
                label="地址">
              </el-table-column>
              <el-table-column
                property="address"
                label="地址">
              </el-table-column>
              <el-table-column
                property="address"
                label="地址">
              </el-table-column>
              <el-table-column
                property="address"
                label="地址">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="960px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="工艺路线名称：">
              工艺路线名称
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工艺路线编号：">
              工艺路线名称
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'Newschedule',
    data() {
      return {
        activeStep: 1,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          workorderCode: null,
          workorderName: null,
          orderSource: null,
          sourceCode: null,
          productId: null,
          productCode: null,
          productName: null,
          productSpc: null,
          unitOfMeasure: null,
          quantity: null,
          quantityProduced: null,
          quantityChanged: null,
          quantityScheduled: null,
          clientId: null,
          clientCode: null,
          clientName: null,
          requestDate: null,
          parentId: null,
          ancestors: null,
          status: null,
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        title: '',
        open: false,
        form: {},
        rules: {
          workorderCode: [
            { required: true, message: '请输入工单编号', trigger: 'blur' }
          ],
          workorderName: [
            { required: true, message: '请输入工单名称', trigger: 'blur' }
          ],
          orderSource: [
            { required: true, message: '请选择工单来源', trigger: 'change' }
          ],
          productId: [
            { required: true, message: '请选择产品', trigger: 'change' }
          ],
          clientId: [
            { required: true, message: '请选择客户', trigger: 'change' }
          ],
        }
      }
    },
    created() {

    },
    methods: {
      handleChangeStep(step) {
        this.activeStep = step
      },
      handleAdd(){
        console.log('123');
        this.open = true
        this.title = '新增'
      },
      handleEdit(){
        console.log('123');
      },
      handleDelete(){
        console.log('123');
      },
    }
  }
</script>

<style scoped>
/deep/.el-form-item__content {
  width: 180px;
}
/deep/.el-date-editor.el-input {
    width: 180px;
}
</style>

<style lang="scss" scoped>
.app-container{
  &-box{
    margin-bottom: 20px;
    &-divider{
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      border: 1px solid #333333;
      padding: 5px;
      border-radius: 5px;
    }
    &-content{
      &-main{
        &-btn{
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>